<!DOCTYPE html>
<html>
<head th:include="vue-element :: header"></head>
<style>
    [v-cloak] {
        display: none;
    }
</style>
<body>
<div id="vm" v-cloak>
    <el-container>
        <el-main>
            <div class="tableDate">
                <div class="button" style="width:3%;float:right;">
                    <P>
                        <el-button class="el-icon-plus" @click.prevent="addRow()"></el-button>
                    </P>
                    <p>
                        <el-button class="el-icon-minus" @click.prevent="delData()"></el-button>
                    </p>
                </div>
                <div class="table">
                    <el-table
                            :data="tableDataShipFee"
                            ref="table"
                            tooltip-effect="dark"
                            border
                            stripe
                            style="width: 95%"
                            @selection-change='selectRow'>
                        <el-table-column type="selection" width="45" align="center"></el-table-column>
                        <el-table-column label="序号" type="index" width="120" align="center"></el-table-column>
                        <el-table-column label="地区"  align="center">
                            <template slot-scope="scope">
                                <el-input  type="textarea" v-model="scope.row.areaNames" readonly="readonly" autosize></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="选择地区" align="center" width="100">
                            <template slot-scope="scope">
                                <el-button type="primary" @click="selectArea(scope.row)" icon="el-icon-edit">选择
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-table-column label="首件" width="100">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.firstNums" type="number"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="邮费" width="100">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.firstAmt" type="number"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column prop="id" label="续件" width="100">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.secondNums" type="number"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="邮费" width="100">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.secondAmt" type="number"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="120">
                            <template slot-scope="scope">
                                <el-button type="success" @click="confirmEdit(scope.row)" size="small"
                                           icon="el-icon-circle-check-outline">保存
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div>
                    <el-dialog title="选择地区" :visible.sync="dialogFormVisible" >
                        <el-table :data="gridData" ref="multipleTable"  @selection-change='selectAreaRow'  highlight-current-row>
                            <el-table-column type="selection" width="45" align="center"></el-table-column>
                            <el-table-column label="序号" type="index" width="120" align="center"></el-table-column>
                            <el-table-column property="id" label="编号" width="150"></el-table-column>
                            <el-table-column property="name" label="地区" width="200"></el-table-column>
                        </el-table>

                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
            </div>
        </el-main>
    </el-container>
</div>
<div th:include="vue-element :: footer"></div>
</body>
</html>



<script th:inline="javascript">
    const vm = new Vue({
            el: '#vm',
            data: {
                productId: [[${productId}]],
                gridData: [],
                dialogFormVisible: false,
                tableDataShipFee: [[${productShipFeeCfgs}]],
                selectlistRow: [],
                selectArealistRow: [],
                dataIndex: null,
            },
            created() {
                this.getData();
            },
            methods: {
                // 获取表格选中时的数据
                selectRow(val) {
                    this.selectlistRow = val
                },
                selectAreaRow(val) {
                    console.log('selectAreaRow ', val);
                    if (val && val.length != 0){
                        this.selectArealistRow = val
                        let names = [];
                        let ids = [];
                        this.selectArealistRow.forEach((item) => {
                            names.push(item.name);
                        ids.push(item.id);
                    });
                        console.log('names',names);
                        console.log("index;;",this.dataIndex);
                        if (this.tableDataShipFee[this.dataIndex]) {
                            this.tableDataShipFee[this.dataIndex].areaNames = names.join(',');
                            this.tableDataShipFee[this.dataIndex].areaIds = ids.join(',');
                        }
                    }
                    // console.log(this.tableDataShipFee);
                },
                // 增加行
                addRow() {
                    let len = 0;
                    if (this.tableDataShipFee && this.tableDataShipFee.length != 0) {
                        len = this.tableDataShipFee.length;
                    }
                    var list = {
                        id: '',
                        index: len,
                        areaIds:this.areaIds,
                        areaNames:this.areaNames,
                        firstNums: this.firstNums,
                        secondNums: this.secondNums,
                        secondAmt: this.secondAmt,
                        firstAmt: this.firstAmt
                    };
                    list.productId = this.productId;
                //     axios.post("/app/product/updateShipFee", list, {
                //         headers: {'x-requested-with': 'XMLHttpRequest'}
                //     }).then(resp => {
                //         this.dataIndex = resp.data.data.id;
                //         this.list = resp.data.data;
                // }).
                //     catch(error => console.log(error)
                // );
                    this.tableDataShipFee.push(list);
                    // this.getData();
                },
                getData() {
                    var list = {
                        productId: this.productId
                    };
                    axios.post("/app/product/getAreaCoord", list, {
                        headers: {'x-requested-with': 'XMLHttpRequest'}
                    }).then(resp => {
                        this.gridData = resp.data.data;
                        let index = 0;
                        this.tableDataShipFee.forEach(row => {
                            row.index = index;
                            index++;
                        });
                    console.log(this.gridData);
                }).
                    catch(error => console.log(error)
                );
                },

                // 删除方法
                // 删除选中行
                delData() {
                    console.log(this.selectlistRow);
                    // 删除 选中行
                    axios.post("/app/product/deleteShipFee", this.selectlistRow, {
                        headers: {'x-requested-with': 'XMLHttpRequest'}
                    }).then(resp => {}
                ).
                    catch(error => console.log(error)
                )
                    ;
                    for (let i = 0; i < this.selectlistRow.length; i++) {
                        let val = this.selectlistRow
                        // 获取选中行的索引的方法
                        // 遍历表格中tableData数据和选中的val数据，比较它们的id,相等则输出选中行的索引
                        // id的作用主要是为了让每一行有一个唯一的数据，方便比较，可以根据个人的开发需求从后台传入特定的数据
                        val.forEach((val, index) => {
                            this.tableDataShipFee.forEach((v, i) => {
                                if(val.id === v.id
                    )
                        {
                            // i 为选中的索引
                            this.tableDataShipFee.splice(i, 1)
                        }
                    })
                    })
                    }
                    this.getData();
                    // 删除完数据之后清除勾选框
                    //this.$refs.tableData.clearSelection()
                },

                confirmEdit(row) {
                    row.edit = false;
                    row.productId = this.productId;
                    console.log(row.id);
                    console.log('row.firstNums+++',row.firstNums == null);
                    if(row.areaIds == null) {
                       alert("地区不能为空");
                       return;
                    }
                    if(row.firstNums == null) {
                        alert("首件不能为空");
                        return;
                    }
                    if(row.firstAmt == null) {
                        alert("首件邮费不能为空");
                        return;
                    }
                    if(row.secondNums == null) {
                        alert("续件不能为空");
                        return;
                    }
                    if(row.secondAmt == null) {
                        alert("续件邮费不能为空");
                        return;
                    }
                    this.post("/app/product/updateShipFee", row, data => {
                        this.$message({
                            msg: '运费已修改',
                            type: 'success',
                            showClose: true,
                            code: 0
                        });
                })
                    ;
                    this.getData();
                    console.log('row', row);
                },
                post(url, data, success, failed) {
                    axios.post(url, data, {
                        headers: {'x-requested-with': 'XMLHttpRequest'}
                    }).then(resp => {
                        let data = resp.data;
                })
                .
                    catch(error => console.log(error)
                )
                    ;
                },

                getData2(row) {
                    //  将已选中的值初始化
                    axios.post("/app/product/getAreaCoord", this.productId, {
                        headers: {'x-requested-with': 'XMLHttpRequest'}
                    }).then(resp => {
                        this.gridData = resp.data.data;
                    let data = null;
                    axios.post("/app/product/selectShipFee", row, {
                        headers: {'x-requested-with': 'XMLHttpRequest'}
                    }).then(resp => {
                        this.gridData = this.gridData.concat(resp.data.data);
                    console.log(resp.data.data);
                    console.log(this.gridData);
                }).
                    catch(error => console.log(error)
                )
                    ;
                    console.log(this.gridData);
                }).
                    catch(error => console.log(error)
                )
                    ;
                },

                selectArea(row) {
                    const that = this;
                    const sRow = row;
                    that.dataIndex = sRow.index;
                    console.log("dataIndex+++++",that.dataIndex);
                    console.log('selectArea::',sRow);
                    //  将已选中的值初始化
                    axios.post("/app/product/getAreaCoord", sRow, {
                        headers: {'x-requested-with': 'XMLHttpRequest'}
                    }).then(resp => {
                        this.gridData = resp.data.data;

                    axios.post("/app/product/selectShipFee", sRow, {
                        headers: {'x-requested-with': 'XMLHttpRequest'}
                    }).then(resp1 => {
                        this.gridData = this.gridData.concat(resp1.data.data);
                    let data = resp1.data.data;
                    console.log("resp1", data);

                    setTimeout(function()  {
                        that.toggleSelection(null);
                        if (data) {
                            that.toggleSelection(data);
                        }
                    }, 200);
                }).
                    catch(error => console.log(error)
                )
                    ;
                    // console.log( this.gridData);
                }).
                    catch(error => console.log(error)
                )
                    ;
                    //过滤掉已选择的地区，重新赋值给gridData
                    this.dialogFormVisible = true;
                    row.edit = false;
                    // console.log('row', row);
                }
                ,
                toggleSelection(rows) {
                    if (rows) {
                        rows.forEach(row => {
                            this.$refs.multipleTable.toggleRowSelection(row,true);
                         });
                    } else {
                        this.$refs.multipleTable.clearSelection();
                    }
                }
            }
        }
    );
</script>
